import React,{useState} from 'react'
import './App.css'


function App() {





  return (
    <div className="app">
      <header className="app-header">
        <h1>React待办事项</h1>
        <p>使用React Hooks实现的任务管理器</p>
      </header>
   <main className="todo-container">
        <div className="todo-input">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="添加新任务..."
            onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          />
          <button onClick={addTodo}>添加</button>
        </div>
        
        <div className="todo-filters">
          <button 
            className={filter === 'all' ? 'active' : ''} 
            onClick={() => setFilter('all')}
          >
            全部
          </button>
          <button 
            className={filter === 'active' ? 'active' : ''} 
            onClick={() => setFilter('active')}
          >
            进行中
          </button>
          <button 
            className={filter === 'completed' ? 'active' : ''} 
            onClick={() => setFilter('completed')}
          >
            已完成
          </button>
        </div>
        
        <div className="todo-stats">
          <p>剩余任务: <span>{remainingTodos}</span></p>
          <p>总任务数: <span>{todos.length}</span></p>
        </div>
        
        <ul className="todo-list">
          {filteredTodos.length === 0 ? (
            <li className="empty-message">暂无任务</li>
          ) : (
            filteredTodos.map(todo => (
              <li key={todo.id} className={todo.completed ? 'completed' : ''}>
                {editingId === todo.id ? (
                  <div className="edit-mode">
                    <input
                      type="text"
                      value={editText}
                      onChange={(e) => setEditText(e.target.value)}
                      autoFocus
                    />
                    <button onClick={() => saveEdit(todo.id)}>保存</button>
                    <button onClick={cancelEdit}>取消</button>
                  </div>
                ) : (
                  <div className="todo-item">
                    <input
                      type="checkbox"
                      checked={todo.completed}
                      onChange={() => toggleTodo(todo.id)}
                    />
                    <span className="todo-text">{todo.text}</span>
                    <div className="todo-actions">
                      <button onClick={() => startEditing(todo)}>编辑</button>
                      <button onClick={() => deleteTodo(todo.id)}>删除</button>
                    </div>
                  </div>
                )}
              </li>
            ))
          )}
        </ul>
      </main>

      <footer>
        <p>使用React Hooks实现  |    功能包括增删改查和状态切换</p>
      </footer>
    </div>
  )
}